import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import productApi from '../../api/product';
import { Upload, Card, Breadcrumb, Space, } from 'antd';
import ImgCrop from "antd-img-crop";
// eslint-disable-next-line import/no-anonymous-default-export
export default () => {
  const params = useParams();
  const { id } = params;
  const [data, setData] = useState({ id: "" });

  const up = async (id) => {
    const data = await productApi.getOne(id)
    setData(data)

  };
  useEffect(() => up(id), [id])
  const [fileList, setFileList] = useState([
    {}
  ]);

  const onChange = ({ fileList: newFileList }) => {
    setFileList(newFileList);
  };

  const onPreview = async (file) => {
    let src = file.url;
    if (!src) {
      src = await new Promise((resolve) => {
        const reader = new FileReader();
        reader.readAsDataURL(file.originFileObj);
        reader.onload = () => resolve(reader.result);
      });
    }
    const image = new Image();
    image.src = src;
    const imgWindow = window.open(src);
    imgWindow.document.write(image.outerHTML);
  };



  return (
    <div className="site-card-border-less-wrapper">
      <Space direction="vertical" style={{ width: "100%" }}>
        <Card>
          <Breadcrumb>
            <Breadcrumb.Item>主页</Breadcrumb.Item>
            <Breadcrumb.Item>
              <a href="#/info/product">商品</a>
            </Breadcrumb.Item>
            <Breadcrumb.Item>
              <a href="#/info/product">上传图片</a>
            </Breadcrumb.Item>
          </Breadcrumb>
        </Card>
        <Card>
          <Card title="上传图片" style={{ width: 300 }}>
            <p>{data.name}</p>
            <ImgCrop rotate>
              <Upload
                action="/resource/product/upload"
                listType="picture-card"

                data={
                  // eslint-disable-next-line no-const-assign
                  { _id: id }
                }
                // fileList={fileList}
                onChange={onChange}
                onPreview={onPreview}
                openFileDialogOnClick={true}
              >
                {fileList.length < 5 && "+ Upload"}
              </Upload>
            </ImgCrop>
          </Card>
        </Card>
      </Space>
    </div>

  )
}